<template>
  <div class="shopTypeRadio_module">
    <el-radio-group 
    :disabled="disabled" 
    v-model="localModelValue" 
    class="ml-4"
    @change="change">
      <el-radio
        v-for="item in options"
        :key="item.value"
        :value="item.value"
        size="large"
        >{{ item.label }}</el-radio
      >
    </el-radio-group>
  </div>
</template>

<script lang="ts">
// 店铺类型单选框组件

import { defineComponent, ref, watch, onMounted } from "vue";
import { getShopType } from "../../../service/storeManagement/storeManagement"
export default defineComponent({
  props: {
    modelValue: {
      type: String,
      default: () => "",
    },
    disabled: {
      type: Boolean,
      degfault: () => false,
    },
  },
  setup(props, { emit }) {
    onMounted(() => {
      getShopTypeOpt()
    })
    interface optionDataType {
      value: string;
      label: string;
    }
    const options = ref<optionDataType[]>([]);
    const localModelValue = ref<string>(props.modelValue);
    // 获取标签
    const getLabels = (options: optionDataType[], selectedValues: string) => {
      let label = options.find((item) => item.value === selectedValues)?.label;
      return label;
    };

    const change = (payload: string) => {
      emit("update:modelValue", payload);
      emit("getLabels", getLabels(options.value, payload));
    };

    const getShopTypeOpt = () => {
      getShopType().then(res => {
        if (res && res.data && res.data.data) {
          let list = res.data.data
          let opt = list.map((itme:any) => {
            return {
              label: itme.shopTypeName,
              value: itme.shopTypeId,
            }
          });
          options.value = opt
        }
        
      }).catch(() => {})
    }
    watch(
      () => props.modelValue,
      (newVal) => {
        localModelValue.value = newVal;
        emit("getLabels", getLabels(options.value, newVal));
        emit("update:modelValue", newVal);
      },
      {
        immediate: true,
      }
    );
    return {
      options,
      localModelValue,
      change,
    };
  },
});
</script>
<style scoped>
.el-radio.el-radio--large {
    height: 32px;
}
</style>
